<div class="documents content-margin">
    <div class="flex-window stretch">
        <div class="flex-window-head">
            <div class="clearfix">
                <div class="btn-group">
                    <button type="button" class="btn btn-primary"
                            data-bind="click: newDocument, requiredAccess: 'DatabaseReadWrite'">
                        <i class="icon-new-document"></i>
                        <span>New document</span>
                    </button>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                            data-bind="enable: inSpecificCollection, requiredAccess: 'DatabaseReadWrite'">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#" data-bind="click: newDocumentInCollection.bind($root)"><i class="icon-new-document"></i> <span>New document in current collection</span></a></li>
                    </ul>
                </div>
                <div class="btn-group-label" data-bind="css: { active: selectedItemsCount }" data-label="Selection" role="group">
                    <button type="button" class="btn btn-danger"
                            data-bind="click: deleteSelected, css: { 'btn-spinner': spinners.delete() }, enable: deleteEnabled, requiredAccess: 'DatabaseReadWrite'">
                        <span class="icon-trash"></span> <span>Delete</span>
                    </button>
                    <div class="btn-group has-disable-reason" data-bind="attr: { 'data-original-title': copyDisabledReason().reason }">
                        <button type="button" class="btn" data-bind="disable: copyDisabledReason().disabled || spinners.copy(), click: copySelectedDocs, css: { 'btn-spinner': spinners.copy() }">
                            <span class="icon-copy"></span> <span>Copy</span>
                        </button>
                        <button type="button" class="btn dropdown-toggle" disabled="disabled" data-toggle="dropdown" data-bind="disable: copyDisabledReason().disabled">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#" data-bind="click: copySelectedDocIds">Copy IDs</a></li>
                        </ul>
                    </div>
                    <!-- TODO
                <div class="btn-group">
                    <button type="button" class="btn" disabled="disabled" data-toggle="button">
                        <span class="icon-export"></span> <span>Export</span>
                    </button>
                </div>-->
                </div>
            </div>
            <div class="clearfix">
                <div class="pull-right">
                    <button class="btn btn-default btn-sm" title="Query current collection" data-bind="click: $root.queryCollection">
                        <i class="icon-query"></i>
                        <span>Query</span>
                    </button>
                    <div class="btn-group" data-bind="visible: canExportToFile">
                        <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="true" title="Export documents as CSV/JSON">
                            <i class="icon-csv-export"></i><span>Export to file</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu padding padding-sm slidein-style" role="menu" data-bind="dropdownPanel: true">
                            <div class="flex-form padding padding-sm">
                                <div class="form-group flex-horizontal gap-3">
                                    <label class="mb-0 align-self-center" style="width: 60px;">Format</label>
                                    <div class="btn-group flex-horizontal">
                                        <button type="button" class="btn btn-dark"
                                                data-bind="click: _.partial(exportAsFileSettings.format, 'csv'), css: { active: exportAsFileSettings.format() === 'csv' }">CSV</button>
                                        <button type="button" class="btn btn-dark"
                                                data-bind="click: _.partial(exportAsFileSettings.format, 'json'), css: { active: exportAsFileSettings.format() === 'json' }">JSON</button>
                                    </div>
                                </div>
                                <div class="form-group flex-horizontal gap-3">
                                    <label class="mb-0 align-self-center" style="width: 60px;">Columns</label>
                                    <div class="btn-group flex-horizontal">
                                        <button type="button" class="btn btn-dark"
                                                data-bind="click: _.partial(exportAsFileSettings.allColumns, true), css: { active: exportAsFileSettings.allColumns() }">All</button>
                                        <button type="button" class="btn btn-dark"
                                                data-bind="click: _.partial(exportAsFileSettings.allColumns, false), css: { active: !exportAsFileSettings.allColumns() }">Visible</button>
                                    </div>
                                </div>
                                <div class="form-group margin-top-sm mb-0">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-primary close-panel" data-bind="click: exportAsFile">
                                            <i class="icon-download"></i>
                                            <span>Export</span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </ul>
                    </div>
                    <div class="btn-group dropdown-right">
                        <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
                                data-bind="css: { active: columnsSelector.customLayout }, attr: { title: columnsSelector.customLayout() ? 'Using custom columns and its order' : 'Choose visible columns' } ">
                            <i class="icon-table"></i><span>Display</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu colselect-dropdown slidein-style" role="menu" data-bind="dropdownPanel: true">
                            <div data-bind="compose: { model: $root.columnsSelector }"></div>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-window-scroll">
            <div class="scroll-stretch">
                <div class="panel">
                    <virtual-grid class="resizable documents-grid" params="controller: gridController, emptyTemplate: 'empty-collection-template'"></virtual-grid>
                </div>
            </div>
        </div>
        <div class="has-error" data-bind="visible: dataChanged()">
            <div class="help-block">
                <i class="icon-danger"></i><span>The data has changed. Your results may contain duplicates or non-current entries. <a href="#" data-bind="click: refresh">Refresh</a></span>
            </div>
        </div>
    </div>
    <div class="hidden">
        <form method="post" download target="hidden-form" id="exportCsvForm">
            <input type="hidden" name="ExportOptions"/>
        </form>
    </div>
</div>

<script type="text/html" id="empty-collection-template">
    <div data-bind="text: $root.currentCollection().isAllDocuments ? 'There are no documents in the database' : 'Collection is empty'">
    </div>
</script>
<div class="tooltip json-preview js-documents-preview" style="opacity: 0">
    <pre><code></code></pre>
</div>

<div data-bind="if: isDeleteDocumentsModalVisible()">
    <div data-bind="react: $root.deleteDocumentsModalView"></div>
</div>